// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// 
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// 
//     http://www.apache.org/licenses/LICENSE-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@use './config';

.chart {
  display: block;
  width: 100%;
  height: 100%;

  &:nth-child(4n + 2),
  &:nth-child(4n + 3) {
    background-color: #f6f6f6;
  }

  .hidden {
    display: none;
  }

  .debug {
    fill: #ccc;
    text-anchor: end;
  }

  polyline,
  line {
    stroke: black;
    stroke-width: 0.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  text {
    font-size: 2px;
  }

  .legends {
    .legend {
      cursor: pointer;

      &:hover {
        opacity: 0.6;
      }

      &.hidden {
        display: block;
        opacity: 0.3;
      }

      circle {
        r: 1;
      }

      text {
        text-anchor: start;
      }
    }
  }

  .tooltips {
    .bg {
      fill: white;
      stroke-width: 0.1;
      stroke: #aaa;
    }

    circle {
      r: 0.5;
    }

    text {
      text-anchor: start;
    }
  }

  .grids {
    .grid {
      stroke: #ddd;
      stroke-width: 0.1;
    }

    .grid-x {
      &.selected {
        stroke: #aaa;
        stroke-width: 0.2;
        stroke-dasharray: 0.5 0.5;
      }
    }
  }

  .axes {
    .axis {
      stroke: #ddd;
      stroke-width: 0.4;
    }

    // text {
    // }
  }

  .datasets {
    .dataset {
      stroke-width: 0.4;
      fill: none;
    }
  }

  // .points {
  // }

  .dataLabels {
    text.dataLabel {
      text-anchor: middle;
      stroke-width: 0.1;
    }
  }

  .areas {
    polygon.area {
      stroke-width: 0;
      opacity: 0.5;
    }
  }
}

// .chart.step {
//   .datasets {
//     .dataset {
//     }
//   }
// }

.chart.pie,
.chart.doughnut {
  .sector {
    stroke-width: 0.2;
    stroke: white;
  }
}
